<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<title>使用 JavaScript 代替模板功能</title>
</head>
<body>
<div id="app1">
	<ul v-if="items.length">
	  <li v-for="item in items">{{ item.name }}</li>
	</ul>
	<p v-else>No items found.</p>
</div>

<div id="app2"> <test-item v-bind:items=items></test-item>
</div>

</body>
</html>
<script type="text/javascript">
	var app1=new Vue({
		el: '#app1',
		data: {
		    items: [
		      { name: 'Foo' },
		      { name: 'Bar' }
		    ]
	  	}
	});

	Vue.component('test-item',{
		props: ['items'],
		render: function (createElement) {
		  if (this.items.length) {
		    return createElement('ul', this.items.map(function (item) {
		      return createElement('li', item.name)
		    }))
		  } else {
		    return createElement('p', 'No items found.')
		  }
		}
	});
	var app2=new Vue({
		el: '#app2',
		data: {
		    items: [
		      { name: 'Foo' },
		      { name: 'Bar' }
		    ]
	  	}
	});
</script>